<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>mobile-detail</title>
  <!-- Bootstrap -->
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
  <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
  <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css">

  <link rel="stylesheet" href="css/mobile-detail.css">
</head>
<body>
  <!-- 头部 -->
  <!-- 桌面屏幕 -->
  <div id="header" class="visible-md-block visible-lg-block hidden-xs hidden-sm">
      <nav id="navbar">
          <div class="container">
              <div class="navbar-header">
                  <a href="" class="navbar-brand">LOGO</a>
              </div>
              <ul class="nav navbar-nav navbar-right">
                  <li>
                      <img src="image/home/icon-a.png" alt="">
                      <a href="mobile-login.html">登录</a>
                  </li>
                  <li>
                      <img src="image/home/icon-b.png" alt="">
                      <a href="mobile-list.html">注册</a>
                  </li>
              </ul>
          </div>
      </nav>
      <nav id="subnavbar">
          <div class="container">
              <ul class="nav navbar-nav">
                  <li><a href="mobile-home.html">首页</a></li>
                  <li><a href="mobile-list.html">美食菜单</a></li>
                  <li><a href="mobile-health.html">健康养生</a></li>
                  <li><a href="mobile-user.html">个人中心</a></li>
              </ul>
              <form class="navbar-form navbar-right form" action="/" method="get">
                  <div class="input-group">
                      <input type="text" class="form-control" placeholder="搜索美食、健康养身">
                      <div class="input-group-btn">
                          <button class="btn btn-primary" type="submit">
                              <img src="image/list/icon.png" alt="">
                          </button>
                      </div>
                  </div>
              </form>
          </div>
      </nav>
  </div>
  <!-- 移动设备 -->
  <div id="mo-header" class="visible-xs-block visible-sm-block hidden-md hidden-lg">
      <div class="container">
          <div class="mo-header-navbar">
            <a class="prev"  href="">
                <img src="image/detail/mo-detail-1.png" alt="">
            </a>
            <span>文章详情页</span>
            <a class="home"  href="">
                <img src="image/detail/mo-detail-2.png" alt="">
            </a>
          </div>
      </div>
  </div>
  <!-- 躯干 -->
  <!-- 桌面屏幕 -->
  <div id="detail" class="visible-lg-block visible-md-block hidden-xs hidden-sm ">
    <div class="container">
        <article class="detail-content">
            <h1>今天给大家展示一道省时省力，饭菜合一且营养丰盛的菜：香喷喷的排骨焖饭，让人
                    吃了一碗忍不住想来第二碗！</h1>
            <section class="detail-keyword">
                <img src="image/detail/未标题-1.png" alt="">
                <a href="" class="btn btn-default">饮食常识</a>
                <a href="" class="btn btn-default">饮食常识</a>
                <a href="" class="btn btn-default">饮食常识</a>
                <a href="" class="btn btn-default">饮食常识</a>
                <a href="" class="btn btn-default">饮食常识</a>
                <a href="" class="btn btn-default">饮食常识</a>
            </section>
            <!-- 类名clearfix在父元素加才可以清除浮动 -->
            <section class="detail-keyword-bottom clearfix">
                <section class="detail-time pull-left">
                    <img src="image/detail/未标题-2.png" alt="">
                    <time datetime="2017-11-02 17:11">2017-11-02 17:11</time>
                </section>
                <section class="detail-toolbar pull-right">
                    <span>299人阅读</span>
                    <section class="detail-btn-group">
                        <img src="image/detail/未标题-3.png" alt="">
                        <a href="" class="btn btn-default">收藏</a>
                    </section>
                    <section class="detail-btn-group">
                        <img src="image/detail/未标题-4.png" alt="">
                        <a href="" class="btn btn-default">分享</a>
                    </section>
                </section>
            </section>   
            <!-- 一开始没注意到类名写错了      -->

            <section class="detail-article">
                <p>
                    生活在快节奏的城市，尤其是对于那些上班族来说，时间非常宝贵，很多年轻人对于晚餐时常是瞎对付吃一顿，这样长期下来对于身体健康尤其不利，更有人因此而得了胃病。因此一顿营养丰盛的晚餐对于年轻的上班族来说非常有利，今天给大家展示一道省时省力，饭菜合一且营养丰盛的菜：排骨焖饭。很多年轻人对于晚餐时常是瞎对付吃一顿，这样长期下来对于身体健康尤其不利，更有人因此而得了胃病因此一顿营养丰盛的晚餐对于年轻的上班族来说非常有利。
                </p>
                <figure>
                    <img src="image/detail/未标题-5.jpg" alt="">
                </figure>
                <p>
                    今天小果儿带来的这些入门级快手菜，虽然没有硬菜的厚重和复杂，谁都能学会的家常做法却更多地保留了食材的本味和营养，清爽开胃，适合秋冬季吃～无论对小白还是熟手都无比友善，还有什么理由不试试？
                    生活在快节奏的城市，尤其是对于那些上班族来说，时间非常宝贵，很多年轻人对于晚餐时常是瞎对付吃一顿，这样长期下来对于身体健康尤其不利，更有人因此而得了胃病。因此一顿营养丰盛的晚餐对于年轻的上班族来说非常有利，今天给大家展示一道省时省力，饭菜合一且营养丰盛的菜：排骨焖饭。很多年轻人对于晚餐时常是瞎对付吃一顿。
                </p>
                <div class="detail-article-video">
                    <div class="detail-video-mask"></div>
                    <video  controls
                            muted
                            src="video/video.mp4"
                            poster="image/detail/未标题-10.jpg">
                    </video>
                </div>
                <p>
                    今天小果儿带来的这些入门级快手菜，虽然没有硬菜的厚重和复杂，谁都能学会的家常做法却更多地保留了食材的本味和营养，清爽开胃，适合秋冬季吃～无论对小白还是熟手都无比友善，还有什么理由不试试？生活在快节奏的城市，尤其是对于那些上班族来说，时间非常宝贵，很多年轻人对于晚餐时常是瞎对付吃一顿。
                </p>
                <p class="text-center">
                    <a href="" class="btn">点赞</a>
                    <a href="" class="btn">已赞</a>
                </p>
            </section>
            <div class="detail-commend">
                <div class="detail-commend-header">
                    <div class="row">
                        <div class="detail-commend-item col-md-4 col-lg-4"></div>
                        <div class="detail-commend-item col-md-4 col-lg-4">推荐阅读</div>
                        <div class="detail-commend-item col-md-4 col-lg-4"></div>
                    </div>
                </div>
                <div class="detail-commend-swiper">
                    <div id="swiper5" class="swiper-container">
                        <div class="swiper-wrapper">
                            <figure class="swiper-slide">
                                <a href="">
                                    <img src="image/detail/未标题-2.jpg" alt="">
                                    <figcaption><span>粗粮细作：健康能量燕麦甜品</span></figcaption>
                                </a>
                            </figure>
                            <figure class="swiper-slide">
                                <a href="">
                                    <img src="image/detail/未标题-3.jpg" alt="">
                                    <figcaption><span>粗粮细作：健康能量燕麦甜品</span></figcaption>
                                </a>
                            </figure>
                            <figure class="swiper-slide">
                                <a href="">
                                    <img src="image/detail/未标题-4.jpg" alt="">
                                    <figcaption><span>粗粮细作：健康能量燕麦甜品</span></figcaption>
                                </a>
                            </figure>
                            <figure class="swiper-slide">
                                <a href="">
                                    <img src="image/detail/未标题-2.jpg" alt="">
                                    <figcaption><span>粗粮细作：健康能量燕麦甜品</span></figcaption>
                                </a>
                            </figure>
                            <figure class="swiper-slide">
                                <a href="">
                                    <img src="image/detail/未标题-3.jpg" alt="">
                                    <figcaption><span>粗粮细作：健康能量燕麦甜品</span></figcaption>
                                </a>
                            </figure>
                            <figure class="swiper-slide">
                                <a href="">
                                    <img src="image/detail/未标题-4.jpg" alt="">
                                    <figcaption><span>粗粮细作：健康能量燕麦甜品</span></figcaption>
                                </a>
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 用于发布评论 -->
            <div class="detail-comment">
                <form class="detail-comment-textarea" action="" method="get">
                    <label for="comment">文章评论</label>
                    <textarea name="" 
                                id="comment" 
                                cols="30" 
                                rows="10"
                                placeholder="请输入评论内容...."></textarea>
                    <div class="detail-textarea-bottom">
                        <span class="pull-left">
                                你可以最多输入做多99个字
                        </span>
                        <a class="btn pull-right">
                            评论
                        </a>
                    </div>
                </form>
                <div class="detail-comment-content">
                    <h3>全部评论</h3>
                    <div class="media">
                        <div class="media-left">
                            <a href="">
                                <img src="image/detail/未标题-6.jpg" alt="" class="media-object img-circle">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">我是美食家<small>2017年11月08日 上午10:33</small></h4>
                            <p>
                                    把亲朋好友聚拢在自己家里吃自己亲自做的饭菜，干净卫生、经济实惠，又能联络感情，何乐而不为呢！敢紧跟随小编来学宴客菜吧，一桌丰盛家宴轻松搞定！
                            </p>
                        </div>
                    </div>  
                </div>
                <p class="detail-comment-bottom text-center"><a href="" class="btn btn-default">更多评论</a></p>
            </div>
            
        </article>
    </div>
  </div>
  <!-- 移动设备 -->
  <div id="mo-detail" class="visible-xs-block visible-sm-block hidden-md hidden-lg">
    <div class="mo-content-header">
        <div class="container">
            <h2>
                今天给大家展示一道省时省力，饭菜合一且营养丰盛的菜：香喷喷的排骨焖饭。
            </h2>
            <!-- 发现css失效了，仔细看是html页面标签写错了 -->
            <div class="mo-detail-keyword">
                <img src="image/detail/mo-detail-3.png" alt="">
                <a href="" class="btn btn-default">饮食常识</a>
                <a href="" class="btn btn-default">饮食常识</a>
                <a href="" class="btn btn-default">饮食常识</a>
                <a href="" class="btn btn-default">饮食常识</a>
            </div>
            <div class="mo-keyword-bottom">
                <div class="mo-detail-time pull-left">
                    <img src="image/detail/mo-detail-4.png" alt="">
                    <time datetime=">2017-11-02 17:11">2017-11-02 17:11</time>
                </div>
                <div class="mo-detail-reading pull-right">
                    <span>299人阅读</span>
                </div>               
            </div>
        </div>
    </div>
    <article class="mo-content">
        <section class="mo-content-article">
            <section class="container">
                <p>
                        生活在快节奏的城市，尤其是对于那些上班族来说，时间非常宝贵，很多年轻人对于晚餐时常是瞎对付吃一顿，这样长期下来对于身体健康尤其不利，更有人因此而得了胃病。因此一顿营养丰盛的晚餐对于年轻的上班族来说非常有利。
                </p>
            </section>
            <figure><img src="image/detail/mo-detail-1.jpg" alt=""></figure> 
            <section class="container">
                <p>
                        今天小果儿带来的这些入门级快手菜，虽然没有硬菜的厚重和复杂，谁都能学会的家常做法却更多地保留了食材的本味和营养，清爽开胃。
                </p>
            </section>
            <div class="mo-co-video">
                <div class="mo-v-mask"></div>
                <video controls
                        muted
                        src="video/video.mp4" 
                        poster="image/detail/未标题-10.jpg"></video>
            </div>
            <section class="container">
                <p>
                        今天小果儿带来的这些入门级快手菜，虽然没有硬菜的厚重和复杂，谁都能学会的家常做法却更多地保留了食材的本味和营养.
                </p>
            </section>
            <div class="mo-co-thumbsup text-center">
                <a href="" class="btn">
                    <img src="image/detail/mo-detail-5.png" alt="">
                </a>
            </div>   
        </section>
        <section class="mo-content-commend">
            <section class="container">
                <section class="mo-commend-header">
                    <div class="row">
                        <div class="item col-xs-3 col-sm-4"></div>
                        <div class="item col-xs-6 col-sm-4">推荐阅读</div>
                        <div class="item col-xs-3 col-sm-4"></div>
                    </div>
                </section>
                <div class="mo-commend-swiper">
                    <div  id="swiper6" class="swiper-container">
                        <div class="swiper-wrapper">
                            <figure class="swiper-slide">
                                <img src="image/detail/mo-detail-3.jpg" alt="">
                                <figcaption><span>粗粮细作：健康能量燕麦甜品</span></figcaption>
                            </figure>
                            <figure class="swiper-slide">
                                <img src="image/detail/mo-detail-4.jpg" alt="">
                                <figcaption><span>粗粮细作：健康能量燕麦甜品</span></figcaption>
                            </figure>
                            <figure class="swiper-slide">
                                <img src="image/detail/mo-detail-3.jpg" alt="">
                                <figcaption><span>粗粮细作：健康能量燕麦甜品</span></figcaption>
                            </figure>
                            <figure class="swiper-slide">
                                <img src="image/detail/mo-detail-4.jpg" alt="">
                                <figcaption><span>粗粮细作：健康能量燕麦甜品</span></figcaption>
                            </figure>
                        </div>
                    </div>
                </div>
            </section>
        </section>
        <section class="mo-content-comment">
            <section class="container">
                <h3>全部评论</h3>
                <div class="media">
                    <div class="media-left">
                        <img src="image/detail/mo-detail-5.jpg" alt="" class="media-object img-circle">
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">我是美食家<time datetime="2017.11.08 10:33">2017年11月08日 上午10:33</time></h4>
                        <p>把亲朋好友聚拢在自己家里吃自己亲自做的饭菜，干净卫生、经济实丰盛家宴轻松搞定！</p>
                    </div>
                </div>
            </section>
        </section>
        <section class="mo-content-btn text-center">
            <a href="" class="btn">更多评论</a>
        </section>
    </article>

  </div>
  <!-- 尾部 -->
  <!-- 桌面屏幕 -->
  <div id="footer" class="visible-md-block visible-lg-block hidden-xs hidden-sm">
      <div class="footer-content">
          <div class="container">
              <div class="row">
                  <div class="footer-about col-md-5 col-lg-5">
                      <h3>益海嘉里</h3>
                      <p>益海嘉里旗下拥有“金龙鱼”、“欧丽薇兰”、“胡姬花”、“香满园”、 “海皇”、“丰苑”、“金味”、“锐龙”、“绿涤”、“洁劲100”等著名品牌，产品涵盖了小包装食用油、大米、面粉、挂面、米粉、豆奶、餐饮专用粮油、食品原辅料。</p>
                  </div>
                  <div class="footer-contacts col-md-5 col-lg-5">
                      <h3>联系我们</h3>
                      <address>电话：400-616-5757 <br>
                          传真：0755-61864755 <br>
                          邮箱：<a href="">zhangsan@qq.com</a> <br>
                          地址：中国上海浦东新区陆家嘴环路958号华能联合大厦26楼 <br>
                      </address>
                  </div>
                  <figure class="footer-wechat col-md-2 col-lg-2">
                      <img src="image/home/wechat.jpg" alt="">
                      <figcaption>微信公众号</figcaption>
                  </figure>
              </div>
          </div>
      </div>
      <div class="footer-bottom">
          <div class="container text-center">
              <p>
                  <a  class="first" href="mobile-.html">首页</a>
                  <a href="mobile-list.html">美食地图</a>
                  <a href="mobile-health.html">健康养生</a>
                  <a  class="last" href="mobile-user.html">个人中心</a>
              </p>
              <p>2017版权所有：本网站信息属于益海嘉里 版权所有 Copyright © 2009 京 ICP 备 12025066 号 -1</p>
          </div>
      </div>
  </div>
  <!-- 移动设备 -->
  <div id="mo-footer" class="visible-xs-block visible-sm-block hidden-md hidden-lg">
      <div class="container">
          <div class="row">
              <div class="prev col-xs-2 col-sm-2">
                  <a href=""><img src="image/detail/mo-detail-14.png" alt=""></a>
              </div>
              <div class="col-xs-10 col-sm-10">
                <div class="row">
                    <div class="item col-xs-3 col-sm-3">
                        <img src="image/detail/mo-detail-10.png" alt="" class="item-1">导航
                        <ul class="mo-footer-navbar">
                            <li><a href="mobile-home.html"><img  class="" src="image/detail/mo-detail-6.png" alt="">回到首页</a></li>
                            <li><a href="mobile-list.html"><img  class="" src="image/detail/mo-detail-7.png" alt="">美食菜单</a></li>
                            <li><a href="mobile-health.html"><img  class="" src="image/detail/mo-detail-8.png" alt="">健康养生</a></li>
                            <li><a href="mobile-user.html"><img  class="" src="image/detail/mo-detail-9.png" alt="">个人中心</a></li>
                        </ul>
                    </div>
                    <div class="item col-xs-3 col-sm-3">
                        <img src="image/detail/mo-detail-11.png" alt="" class="item-2">分享
                    </div>
                    <div class="item col-xs-3 col-sm-3">
                        <img src="image/detail/mo-detail-12.png" alt="" class="item-3">评论
                    </div>
                    <div class="item col-xs-3 col-sm-3">
                        <img src="image/detail/mo-detail-13.png" alt="" class="item-4">收藏
                    </div>
                </div>
              </div>
          </div>
          <div class="mo-footer-comment">
            <div class="mo-footer-mask"></div>
            <div class="mo-comment-content">
                <label for="comment">文章评论</label>
                <textarea name="comment" id="comment" cols="30" rows="10" placeholder="请输入评论内容..."></textarea>
                <button type="submit">评论</button>
                <span>X</span>
            </div>
          </div>
      </div>
  </div>
  
  <script data-main="js/app-detail" src="js/require.js"></script>
</body>
</html>